---
/**
 * ============================================================
 * SVGarden — https://www.svgarden.dev
 * Author : Simon-Pierre Boucher
 * Contact: contact@spboucher.ai
 * File   : src/pages/snippet/[slug].astro
 * Desc   : Snippet detail — live preview, customizer, lesson, copy-ready code
 * ============================================================
 */
import Base from '../../layouts/Base.astro';
import LivePreview from '../../components/LivePreview.astro';
import CodeBlock from '../../components/CodeBlock.astro';
import Customizer from '../../components/Customizer.astro';
import SnippetCard from '../../components/SnippetCard.astro';
import { loadSnippets, copyText } from '../../lib/snippets.mjs';

export async function getStaticPaths() {
  const snippets = await loadSnippets();
  return snippets.map((s) => ({ params: { slug: s.slug }, props: { snippet: s } }));
}

const { snippet } = Astro.props;
const all = await loadSnippets();
const related = all.filter((s) => s.category === snippet.category && s.slug !== snippet.slug).slice(0, 3);
const initialCopy = copyText(snippet);

// Everything the client-side customizer needs to rewrite preview + code + clipboard.
const island = {
  header: snippet.header,
  rawCode: snippet.code,
  slug: snippet.slug,
  vars: snippet.customizable.map((c) => ({
    name: c.var,
    unit: c.unit ?? '',
    initial: `${c.default}${c.unit ?? ''}`,
  })),
};
---

<Base title={`${snippet.title} — SVGarden`} description={snippet.desc}>
  <div class="sg-detail-head">
    <p class="sg-breadcrumb">
      <a href="/">Gallery</a> / <a href={`/category/${snippet.category}`}>{snippet.category}</a> / {snippet.title}
    </p>
    <h1>{snippet.title}</h1>
    <p style="color: var(--sg-text-soft); margin: 0;">{snippet.desc}</p>
    <div class="sg-detail-meta">
      <span class="sg-badge sg-badge-cat">{snippet.category}</span>
      <span class={`sg-badge sg-badge-${snippet.difficulty}`}>{snippet.difficulty}</span>
      {snippet.tags.map((t) => <span class="sg-badge">{t}</span>)}
    </div>
  </div>

  <div class="sg-detail-grid">
    <div>
      <LivePreview snippet={snippet} variant="full" />
      {
        snippet.support && (
          <p class="sg-support-note">
            <strong>⚠ Browser support</strong>
            <span>{snippet.support}</span>
          </p>
        )
      }
      <aside class="sg-how">
        <h2>How it works</h2>
        <p>{snippet.howItWorks}</p>
      </aside>
      {
        snippet.techniques.length > 0 && (
          <p style="color: var(--sg-text-soft); font-size: 0.875rem;">
            Techniques: {snippet.techniques.join(' · ')}
          </p>
        )
      }
    </div>
    <div>
      {snippet.customizable.length > 0 && <Customizer controls={snippet.customizable} />}
    </div>
  </div>

  <section class="sg-section">
    <CodeBlock code={initialCopy} label={snippet.relPath} downloadName={`${snippet.slug}.html`} />
  </section>

  {
    related.length > 0 && (
      <section class="sg-section">
        <h2>More {snippet.category}</h2>
        <div class="sg-related">
          {related.map((s) => (
            <SnippetCard snippet={s} />
          ))}
        </div>
      </section>
    )
  }

  <script type="application/json" id="sg-island" set:html={JSON.stringify(island)} />
</Base>

<script>
  // ---- Detail-page wiring: customizer ⇆ preview ⇆ code block ⇆ clipboard ----
  const islandEl = document.getElementById('sg-island');
  const frame = document.getElementById('sg-preview-frame') as HTMLIFrameElement | null;

  // Preview background toggle (light/dark canvas behind the animation)
  for (const btn of document.querySelectorAll<HTMLButtonElement>('[data-sg-bg]')) {
    btn.addEventListener('click', () => {
      frame?.contentDocument?.body?.style.setProperty('--sg-preview-bg', btn.dataset.sgBg!);
      document
        .querySelectorAll('[data-sg-bg]')
        .forEach((b) => b.setAttribute('aria-pressed', String(b === btn)));
    });
  }

  if (islandEl) {
    const island = JSON.parse(islandEl.textContent!) as {
      header: string;
      rawCode: string;
      slug: string;
      vars: { name: string; unit: string; initial: string }[];
    };

    const current = new Map(island.vars.map((v) => [v.name, v.initial]));
    const codeEl = document.querySelector('[data-sg-codeblock] pre code');
    const copySource = document.querySelector('[data-sg-copy-source]');

    const esc = (s: string) => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');

    // Rebuild the full copy/download text from the raw snippet + current values.
    const rebuildCopyText = () => {
      let code = island.rawCode;
      for (const [name, value] of current) {
        code = code.replace(new RegExp(`(${esc(name)}\\s*:\\s*)[^;"']+`, 'g'), `$1${value}`);
      }
      if (copySource) copySource.textContent = `${island.header}\n${code}\n`;
    };

    // Rewrite the highlighted code block in place, keeping Shiki's tokens.
    // Values are declared once, on the root element, so a text-node swap is exact.
    const rewriteCodeDom = (name: string, oldVal: string, newVal: string) => {
      if (!codeEl || oldVal === newVal) return;
      const walker = document.createTreeWalker(codeEl, NodeFilter.SHOW_TEXT);
      const declRe = new RegExp(`(${esc(name)}\\s*:\\s*)${esc(oldVal)}`, 'g');
      let hit = false;
      for (let node = walker.nextNode(); node; node = walker.nextNode()) {
        const text = node.nodeValue ?? '';
        if (declRe.test(text)) {
          node.nodeValue = text.replace(declRe, `$1${newVal}`);
          declRe.lastIndex = 0;
          hit = true;
        }
      }
      if (hit) return;
      // Fallback if the tokenizer split "name:" and "value" apart.
      const walker2 = document.createTreeWalker(codeEl, NodeFilter.SHOW_TEXT);
      for (let node = walker2.nextNode(); node; node = walker2.nextNode()) {
        const text = node.nodeValue ?? '';
        if (text.includes(oldVal)) {
          node.nodeValue = text.replace(oldVal, newVal);
          return;
        }
      }
    };

    const applyControl = (input: HTMLInputElement) => {
      const name = input.dataset.var!;
      const value = `${input.value}${input.dataset.unit ?? ''}`;
      const prev = current.get(name)!;
      current.set(name, value);

      const output = input.closest('.sg-control')?.querySelector('output');
      if (output) output.textContent = value;

      frame?.contentDocument?.body?.firstElementChild
        ?.getAttribute('style') !== null &&
        (frame?.contentDocument?.body?.firstElementChild as HTMLElement | null)?.style.setProperty(name, value);

      rewriteCodeDom(name, prev, value);
      rebuildCopyText();
    };

    const form = document.querySelector<HTMLFormElement>('[data-sg-customizer]');
    form?.addEventListener('input', (e) => {
      if (e.target instanceof HTMLInputElement && e.target.dataset.var) applyControl(e.target);
    });
    form?.addEventListener('reset', () => {
      requestAnimationFrame(() => {
        form.querySelectorAll<HTMLInputElement>('input[data-var]').forEach(applyControl);
      });
    });
  }
</script>